<?php
// 设置响应头为HTML
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素鸟游戏</title>
    <style>
        /* 游戏区域样式 */
        #game {
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            background-color: #71c5cf;
        }

        /* 小鸟样式 */
        #bird {
            width: 30px;
            height: 30px;
            background-color: #ffd700;
            position: absolute;
            top: 200px;
            left: 100px;
        }

        /* 管道样式 */
        .pipe {
            width: 60px;
            height: 300px;
            background-color: #008000;
            position: absolute;
        }

        /* 分数显示样式 */
        #score {
            text-align: center;
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- 分数显示区域 -->
    <div id="score">分数: 0</div>
    <!-- 游戏区域 -->
    <div id="game">
        <!-- 小鸟元素 -->
        <div id="bird"></div>
    </div>
    <script>
        // 获取游戏区域、小鸟和分数元素
        const game = document.getElementById('game');
        const bird = document.getElementById('bird');
        const scoreElement = document.getElementById('score');

        // 初始化小鸟的位置和速度
        let birdY = 200;
        let birdSpeed = 0;
        const gravity = 0.5;

        // 初始化分数
        let score = 0;

        // 管道数组
        const pipes = [];

        // 生成管道的函数
        function createPipe() {
            const pipeTop = document.createElement('div');
            pipeTop.classList.add('pipe');
            pipeTop.style.top = '-150px';
            pipeTop.style.left = '400px';

            const pipeBottom = document.createElement('div');
            pipeBottom.classList.add('pipe');
            pipeBottom.style.bottom = '-150px';
            pipeBottom.style.left = '400px';

            game.appendChild(pipeTop);
            game.appendChild(pipeBottom);

            pipes.push({ top: pipeTop, bottom: pipeBottom, x: 400 });

            // 每隔一段时间生成新的管道
            setTimeout(createPipe, 2000);
        }

        // 移动管道的函数
        function movePipes() {
            for (let i = 0; i < pipes.length; i++) {
                pipes[i].x -= 2;
                pipes[i].top.style.left = pipes[i].x + 'px';
                pipes[i].bottom.style.left = pipes[i].x + 'px';

                // 当管道移出游戏区域，移除管道元素
                if (pipes[i].x < -60) {
                    game.removeChild(pipes[i].top);
                    game.removeChild(pipes[i].bottom);
                    pipes.splice(i, 1);
                    i--;
                    score++;
                    scoreElement.textContent = `分数: ${score}`;
                }

                // 碰撞检测
                if (
                    bird.offsetLeft < pipes[i].x + 60 &&
                    bird.offsetLeft + 30 > pipes[i].x &&
                    (birdY < 150 || birdY + 30 > 450)
                ) {
                    alert('游戏结束！你的分数是: ' + score);
                    location.reload();
                }
            }
            // 循环调用移动管道的函数
            requestAnimationFrame(movePipes);
        }

        // 移动小鸟的函数
        function moveBird() {
            birdSpeed += gravity;
            birdY += birdSpeed;
            bird.style.top = birdY + 'px';

            // 小鸟触顶或触底检测
            if (birdY < 0 || birdY + 30 > 600) {
                alert('游戏结束！你的分数是: ' + score);
                location.reload();
            }

            // 循环调用移动小鸟的函数
            requestAnimationFrame(moveBird);
        }

        // 监听键盘事件，实现小鸟跳跃
        document.addEventListener('keydown', function (event) {
            if (event.key === ' ') {
                birdSpeed = -8;
            }
        });

        // 开始游戏
        createPipe();
        movePipes();
        moveBird();
    </script>
</body>

</html>